<template>
    <div class="index">
        <van-swipe :autoplay="3000">
            <van-swipe-item v-for="(item, index) in images" :key="index">
                <img v-lazy="item.banner_img" class="img" />
            </van-swipe-item>
        </van-swipe>
        <div class="fenlei">
            <fen :src="require('@/assets/images/index-kinds-course.png')"><template #fen>特色课</template></fen>
            <fen :src="require('@/assets/images/index-kinds-one.png')"><template #fen>一对一辅导</template></fen>
            <fen :src="require('@/assets/images/index-kinds-study.png')"><template #fen>学习日历</template></fen>
        </div>
        <navBottom></navBottom>
        <conten v-for="(item,index) in shoye" :key="index" :item="item"></conten>
    </div>
</template>

<script>
import conten from "@/components/conten/conten.vue"
import fen from "@/components/fen/fen.vue"
import { getshoye, getbanner } from "@/http/banner"
export default {
    data() {
        return {
            shoye: [],
            images: [],
        }
    },
    created() {
        this.getshoye()
        this.getbanner()
    },
    methods: {
        async getbanner() {
            let res = await getbanner()
            // console.log(res);
            this.images = res.data
        },
        async getshoye() {
            let res = await getshoye()
            console.log(res);
            this.shoye = res.data
        },
        toDetail(id) {
            this.$router.push({ path: '/detail', query: { id: id } })
        }
    },
    components:{
        fen,
        conten
    }
}
</script>

<style lang="scss">
.img {
    width: 100vw;
    height: 250px;
}
.index{
    background-color: #ddd;
}
.van-swipe {
    position: relative;
    margin-bottom: 100px;
}

.fenlei {
    margin-left: 5vw;
    width: 90vw;
    height: 120px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    top: 210px;
}
</style>
